<template>
	<div class="main">
		<div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;flex:1;flex-wrap: wrap;gap:10px">
				<el-input v-model="searchParam.search" placeholder="请输入课程名称" style="width:200px"></el-input>
				<el-select v-model="searchParam.teacher_id" clearable placeholder="请选择老师"
					style="width:200px">
					<el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="searchParam.status" placeholder="审核状态" style="width: 120px"
					size="small">
					<el-option label="待审核" value="1"></el-option>
					<el-option label="已通过" value="2"></el-option>
					<el-option label="已拒绝" value="3"></el-option>
				</el-select>
				<el-select v-model="searchParam.use_status" clearable placeholder="上架状态" style="width: 120px"
					size="small">
					<el-option label="上架" value="1"></el-option>
					<el-option label="下架" value="2"></el-option>
				</el-select>
				<el-select filterable v-model="searchParam.community_id" placeholder="请选择社区" style="width:200px">
					<el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
				<div style="width:340px" class="ml-10">
					<el-date-picker clearable v-model="searchParam.search_time" value-format="timestamp" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="ml-10">
					<el-button type="primary" @click="searchinfo">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
			</div>
			<div style="display: flex;">
				<el-button v-show="item.path == 'add' || item.path == 'delete'" size="mini" v-for="(item, index) in buttons"
					:key="index" :type="item.path | formatType" :icon="item.icon"
					:disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{
						item.title }}</el-button>
				<!-- <el-button type="primary" @click="add()">添加</el-button> -->
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="importExcel()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
				<!-- <eluploadfile v-if="$auth('import')" :auto-upload="false" :upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				    <el-button type="primary" >导入</el-button>
				</eluploadfile> -->
				<el-button v-if="$auth('export')" type="primary" @click="exportExcel">导出</el-button>
				<!-- <el-button style="margin-left: 10px;"  type="danger" @click="selectdel"
					:disabled="!selection.length">批量删除</el-button> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" header-align="center" border :data="list"
			@selection-change="onSelectionChange" height="100%" row-key="id" header-cell-class-name="main-table-header"
			@row-click="onRowClick">
			<el-table-column type="selection" width="50"> </el-table-column>
			<!-- <el-table-column  show-overflow-tooltip label="社区名称" prop="mass_name"></el-table-column> -->
			<!-- <el-table-column label="课程轮播图">
				<template slot-scope="{row}">
					<el-image v-for="(item,index) in row.img.split(',')" style="width:60px;height:60px" :src="item" :preview-src-list="[item]">
					</el-image>
				</template>
			</el-table-column> -->
			<!-- <el-table-column v-if="$route.query.type" show-overflow-tooltip label="联系方式" prop="mass_mobile" width="120px"></el-table-column> -->
			<el-table-column show-overflow-tooltip label="排课编号" prop="number"></el-table-column>
			<el-table-column show-overflow-tooltip label="课程名称" prop="course_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="社区名称" prop="community_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="上课老师" prop="teacher_name"></el-table-column>
			<el-table-column show-overflow-tooltip label="最低报名人数" prop="mix"></el-table-column>
			<el-table-column show-overflow-tooltip label="最高报名人数" prop="max"></el-table-column>
			<el-table-column show-overflow-tooltip label="状态" prop="status">
				<!-- 1审核中2通过3拒绝 -->
				<template slot-scope="{row}">
					<el-tag v-if="row.status == 1">待审核</el-tag>
					<el-tag v-if="row.status == 2" type="success">已通过</el-tag>
					<el-tag v-if="row.status == 3" type="info">已拒绝</el-tag>
				</template>
			</el-table-column>
			<!-- <el-table-column show-overflow-tooltip label="课时" prop="class_hour" ></el-table-column>
			<el-table-column show-overflow-tooltip label="年龄段" prop="age" ></el-table-column> -->
			<el-table-column label="报名结束时间" prop="sign_end_time" width="150">
				<template slot-scope="{row}">
					{{ row.sign_end_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="排课时间" prop="sign_end_time" width="170">
				<template slot-scope="{row}">
					<div v-if="row.time_arr.length">
						每周{{ getDay(row.time_arr[0].week) }} {{ moment(row.time_arr[0].start_day*1000).format('HH:mm') }}至{{ moment(row.time_arr[0].end_day*1000).format('HH:mm') }}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="70">
				<template slot-scope="{row}">
					<el-tag :type="row.use_status == 1 ? 'success' : 'danger'">
						{{ row.use_status == 1 ? '上架' : '下架' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="上架时间" width="150">
				<template slot-scope="{row}">
					{{ row.create_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="300">
				<template slot-scope="{row}">
					<el-button v-if="row.status == 3" type="primary" @click.stop="add(row, 2)">重新提交</el-button>
					<!-- 1审核中2通过3拒绝 -->
					<el-button v-if="row.status == 1 && $auth('examine')" type="warning"
						@click.stop="examine(row)">审核</el-button>
					<el-button v-if="(row.status == 1 || row.status == 2) && $auth('edit')" type="primary"
						@click.stop="add(row, 1)">编辑</el-button>
					<el-button v-if="row.status == 2" type="primary" @click.stop="openinfo(row)">老师上课明细</el-button>
					<el-button type="primary" @click="$refs.joinList.open(row.sign_user, row.id)">报名列表</el-button>
					<!-- <el-button v-if="row.status==3" type="primary" disabled>已拒绝</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchParam.page" :page-size="searchParam.limit"
			:total="searchParam.total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next">
		</el-pagination>
		<el-dialog :title="title" :key="formDataStatus" :visible.sync="centerDialogVisible" @close="onDialogClose"
			width="67vw">
			<add v-if="displayview == 2" @close="close" :formData="userinfo" @search="addcommunity" :isdisabled="isdisabled"
				:time="time"></add>
			<info v-if="displayview == 1" @close="close" :formData="infolist"></info>
		</el-dialog>

		<joinList ref="joinList"></joinList>
	</div>
</template>
<script>
// import companyCate from '@/components/company-cate.vue'
// import supervisorSelect from '@/components/supervisor-select.vue'auth
import add from './components/add.vue'
import info from './components/info.vue'
import { imghttp, get, post, del } from '@/assets/js/http'
import joinList from './components/joinList.vue'
import moment from 'moment'
// import eluploadfile from '../../components/el-upload-file.vue'
export default {
	components: { add, info, joinList },
	data() {
		return {
			moment,
			infolist: [],
			list: [],
			selection: [],
			addShow: false, //添加显示
			centerDialogVisible: false, //详情弹窗
			title: '', //弹窗标题
			userinfo: {}, //用户信息
			typeList: [], //老师列表
			statusList: [], //社区列表
			searchParam: {
				page: 1,
				limit: 20,
				total: 0,
				cadre_id: '',
				search_time: [],
				community_id: '',
				type: '',
				search: '',
			},
			searchParamCp: {
			},
			formDataStatus: false,
			imgs: [],
			isdisabled: false,
			myid: '',//1超管2课程供应商6产品供应商8社区管理员9总审核员
			time: [],
			displayview: null,//2为add弹窗 1为info列表
		}
	},
	created() {
		Object.assign(this.searchParam, this.$route.query ? this.$route.query : {})
		Object.assign(this.searchParamCp, this.$route.query ? this.$route.query : {})
		this.getList()
		this.getcommunityList()
		this.getteacherList()
		this.getinfo()
	},
	watch: {
		'$route': {
			deep: true,
			handler() {
				this.reset()
			}
		},
	},
	computed: {
		buttons() {
			return this.$store.state.buttons;
		}
	},
	methods: {
		getDay(day){
			let arr = ['天','一','二','三','四','五','六','天']
			return arr[day]
		},
		//获取老师列表
		async getteacherList() {
			this.$loading()
			// let { list,total } = 
			await get({
				url: '/admin/project.Teacher/index',
				params: {
					limit: 9999
				}
			}).then(res => {
				this.typeList = res.list
				this.$loading().close()
			})
		},

		//获取权限
		getinfo() {
			post({
				url: '/admin/project.Activity/admin_info',
			}).then(res => {
				this.myid = res.role
				console.log('myid', this.myid, res.id)
			})
		},
		//获取社区列表
		async getcommunityList() {
			this.$loading()
			// let { list,total } = 
			await get({
				url: '/admin/project.Community/index',
				params: {
					limit: 9999
				}

			}).then(res => {
				this.statusList = res.list
				this.$loading().close()
			})
		},
		//获取排课列表
		async getList() {
			this.$loading()
			// let { list,total } = 
			await get({
				url: '/admin/project.TeacherCourse/index',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						search_time: this.searchParam.search_time.length ? this.searchParam.search_time.map(item => item) : ''
					}
				}
			}).then(res => {
				this.list = res.list
				this.searchParam.total = res.total
				this.importindex = []
				this.$loading().close()
			})
		},
		//审核
		examine(row) {
			this.$confirm('是否通过该排课申请?', '提示', {
				distinguishCancelAndClose: true,
				confirmButtonText: '通过',
				cancelButtonText: '拒绝',
				type: 'warning'
			}).then(() => {
				post({
					url: '/admin/project.Course/apply_status',
					data: {
						id: row.id,
						status: 2,//1审核中2通过3拒绝
					},
					successTip: true,
				}).then(res => {
					this.getList()
				})
			}).catch(action => {
				if (action === 'cancel') {
					post({
						url: '/admin/project.Course/apply_status',
						data: {
							id: row.id,
							status: 3,//1审核中2通过3拒绝
						},
						successTip: true,
					}).then(res => {
						this.getList()
						// this.$message({
						// 	type: 'info',
						// 	message: '已取消删除'
						// });  
					})
				}
				else {

				}

			});
		},
		openinfo(row) {
			this.centerDialogVisible = true
			this.title = "上课列表"
			this.displayview = 1
			this.infolist = row.class_time

		},
		//添加/编辑弹窗
		add(row, n) {
			this.displayview = 2
			this.time = []
			if (row) { //编辑
				this.centerDialogVisible = true
				if (n == 1) {
					this.title = "排课详情"
					this.isdisabled = true
				} else {
					this.title = "编辑课程"
					this.isdisabled = false
				}

				get({
					url: '/admin/project.TeacherCourse/edit',
					params: {
						id: row.id
					}
				}).then(res => {
					this.userinfo = res.row
					this.userinfo.sign_end_time = this.userinfo.sign_end_time * 1000

					this.userinfo.location = { lat: this.userinfo.latitude, lng: this.userinfo.longitude }
					this.userinfo.time_arr.forEach(item => {
						this.time.push({ date: [item.start_day * 1000, item.end_day * 1000], week: parseInt(item.week) })
					})
					if(!this.userinfo.time_arr.length){
						this.time.push({ date:'', week: '' })
					}
					// this.userinfo.day = [this.userinfo.start_day,this.userinfo.end_day]
					// this.userinfo.time = [this.userinfo.start_time_day,this.userinfo.end_time_day]
					// this.userinfo.class_time.forEach(item=>{
					// 	this.time.push({date:[item.start_time*1000,item.end_time*1000]})
					// })
					// this.userinfo.img = [{
					// 	name: res.row.img,
					// 	url: res.row.img,
					// }]
					console.log(this.userinfo)
					// console.log(this.userinfo.location, this.userinfo, this.time)
				})

			} else { //添加
				this.userinfo = {}
				this.isdisabled = false
				this.time = [{}]
				// this.userinfo.times=[{}],
				this.centerDialogVisible = true
				this.title = "添加课程"
			}
			this.formDataStatus = true;
		},
		//添加课程
		addcommunity() {
			this.close()
			this.searchinfo()
		},
		//关闭弹窗
		close() {
			this.centerDialogVisible = false
		},
		reset() {
			this.searchParamCp = this.$options.data().searchParam
			this.searchParam = this.$options.data().searchParam
			this.getList()
		},
		searchinfo() {
			this.searchParam.page = 1
			this.searchParam = {
				...this.searchParam,
				...this.searchParamCp
			}
			this.getList()
		},
		onCurrentChange() {
			this.getList()
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		selectdel() {
			let nums = this.selection.filter(item => item.leave_num != item.max)
			if (nums.length > 0) {
				this.$message({
					type: 'info',
					message: '该课程已有学员报名不可删除'
				})
				return
			}
			this.$confirm(
				`此操作将永久删除该${this.selection.length}个课程, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					let query = "?";
					for (let i = 0; i < this.selection.length; i++) {
						const item = this.selection[i];
						if (i > 0) {
							query += "&ids[]=" + item.id;
						} else {
							query += "ids[]=" + item.id;
						}
					}
					await del({
						url: "/admin/project.TeacherCourse/del" + query,
						successTip: true,
						loading: true
					});
					this.getList()
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: '/api/Realmerit/paike_export',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						search_time: this.searchParam.search_time.length ? this.searchParam.search_time.map(item => item) : ''
					}
				}
			})
			let a = document.createElement('a');
			var url = URL.createObjectURL(res);
			a.href = url;
			a.click();
			this.$loading().close()
		},
		//导入
		async upload({
			raw
		}) {
			this.$loading({
				text: '导入中 请等待...'
			})
			console.log(raw)
			await imghttp({
				url: '/admin/basic.Masses/import',
				data: {
					file: raw
				},
				successTip: true
			})
			this.getList()
			this.$loading().close()
		},
		onDialogClose() {

		},
		tapButton(item) {
			if (item.path === "add") {
				this.add();
			} else if (item.path === "edit") {
				this.onEdit();
			} else if (item.path === "delete") {
				this.selectdel();
			}
			//  else if (item.path === "search") {
			// 	this.onSearch();
			// } else if (item.path === "daoru") {
			// 	this.upload();
			// }
		},

	}
}
</script>

<style>
.el-date-editor .el-range-separator {
	padding: 0;
}
</style>
